<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--字体图标样式-->
    <link rel="stylesheet" href="../../../../../知识点/VScode/eduPage/css/iconfont/iconfont.css"/>

</head>   
<body>
    <div class="container header">header</div>
    
    <div class="container">
    
           <!--输入框-->
         <form action="" method="GET" id="box">
           <div class="row">
               <div class="col-md-3">
                    <div class="input-group input-group-sm">
                         <span class="input-group-addon">课程名称</span>
                         <input type="text" class="form-control">
                    </div>
               </div>
               <div class="col-md-2">
                    <div class="input-group input-group-sm">
                         <span class="input-group-addon">状态</span>
                         <input type="text" class="form-control">
                    </div>
               </div>
               <div class="col-md-2">
                   <button class="btn btn-success btn-sm">查询</button>
               </div>
           </div>
            </form>     
               <div class="col-md-3 col-md-offset-2">
                   <button class="btn btn-primary btn-sm">创建课程</button>
               </div>
           </div>
         <div>
            <table class="table table-hover">
            <!-- <caption>悬停表格布局</caption> -->
            <thead>
                <tr>
                <th>id</th>
                <th>课程名称</th>
                <th>价格</th>
                <th>排序</th>
                <th>状态</th>
                <th>操作</th>
                </tr>
            </thead>
            <tbody class="text-center">
                <!-- <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>0</td>
                    <td>
                       <span class="iconfont size text-success">&#xe62c;</span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-danger">下架</button>
                        <button class="btn btn-sm btn-default">营销信息</button>
                        <button class="btn btn-sm btn-default">内容管理</button>
                    </td>
                </tr>-->
            </tbody>
            </table>
         </div>
     </div>
</body>
</html>

<style>
.container{
    background: #f7f7f7;
}
#box{
    padding: 20px 0 20px 0;
}

.table>tbody>tr>td{
    vertical-align:middle;
}
.table>thead>tr>th{
    text-align: center
}
.header{
    margin-top: 40px;
    background: white;
}
.size{
    font-size: 10px;
}
</style>

<script>
    //要先等页面加载完毕 再去获取dom节点
    //window.onload=function(){
    //
    // }
    $(function () {
        $.ajax({
            url:"http://localhost:8080/test_war/course",
            data:{
                methodName:"findCourseList"
            },
            success:function (res) {

                //前端JSON转对象 JSON.parse()
                var parse = JSON.parse(res);
                console.log(parse)
                //forEach(function(每一项，下标值，原数组){})
                parse.forEach(function (item) {
                    $("tbody").append(`   <tr>
                     <td>${item.id}</td>
                     <td>${item.course_name}</td>
                     <td>${item.sort_num}</td>
                     <td>${item.status }</td>
                    <td>
                       <span class="iconfont size text-success">&#xe62c;</span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-danger">下架</button>
                        <button class="btn btn-sm btn-default">营销信息</button>
                        <button class="btn btn-sm btn-default">内容管理</button>
                    </td>
                </tr>`)
                })
            },
            error:function (err) {
                console.log(err)
            }
        })
    })
</script>

